<template>
	<view class="centerTop">
		<view class="goClubAudit" v-if="user.role == 'jyu_admin'" @click="toClubAudit">
			<view class="redPoint" v-if="clubAuditLength > 0">
				{{ clubAuditLength }}
			</view>
			<image class="clubIcon" src="@/static/icons/clubAuditIcon.svg" />
			社团审核
		</view>
		<view class="header">
			<image class="avatar" :src="user.avatarUrl" mode="aspectFill" />
			<view class="userInf">
				<view class="userName" @click="toLogin">
					{{ user.username || '请先登录' }}
					<view style="display: inline-block;">
						<Tag tag="封禁中" type="danger" :context="warnContext" v-if="useUser.userInf.role === 'warn'" />
					</view>
					<!-- <view class="warnDetail" v-if="ifWarn">
						{{warnContext}}
					</view> -->
					<!-- 			<van-popup :show="ifShowWarnContext" position="bottom" @click-overlay='onClose' custom-style="background-color:#f8f8f8;border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;">{{warnContext}}</van-popup> -->
				</view>
				<!-- <view class="msgDetail">
					<Tag type="normal" tag="614社团"></Tag>
				</view> -->
			</view>
			<!-- <van-icon size='60rpx' class="editIcon" name="arrow"  /> -->
			<van-button v-if="user.username" @click="toEdit" class="editIcon" round size="large" icon="arrow"
				type="default" />
		</view>
		<view :class="{ newPost: true, disabled: useUser.userInf.role === 'warn' || !useUser.userInf.role }">
			<view class="btn left" @click="newPost">发布帖子</view>
			<view class="btn right" @click="newClub">申请社团</view>
		</view>
	</view>
	<view class="centerBody">
		<van-tabs v-model:active="typeData" swipeable color='blue' sticky @change='changeTypeCenter' :z-index='100'>
			<van-tab title="我发布的">
				<PostList :ifMine='true' :postData="centerData[0]" @update:page="handlePageUpdate" :total="total"
					:page="page" :type='type' />
			</van-tab>
			<van-tab v-if="user.role === 'jyu_admin'" title="待审核的">
				<PostList :ifAudit='true' :postData="centerData[1]" @update:page="handlePageUpdate" :total="total"
					:page="page" :type='type' v-if="type==0" />
			</van-tab>
			<van-tab v-if="useUser.isAnyClubTeacher" title="社团活动审核">
				<PostList :ifAudit='true' :ifTeacher="true" :postData="centerData[activityTabIndex]" @update:page="handlePageUpdate"
					:total="total" :page="page" :type='type' v-if="type==0" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script setup>
	import PostList from '@/pages/index/components/PostsList.vue'
	import Tag from '@/components/Tag.vue'
	import {
		onMounted,
		ref,
		provide,
		reactive,
		computed,
	} from 'vue'
	import {
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		throttle
	} from '@/utils/throttle.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '@/store';
	const useUser = useUserStore();
	const user = ref({
		role: ''
	})
	onMounted(() => {
		onReachBottom(onPageBottom);
	});
	const onPageBottom = throttle(() => {
		if (page.value * 10 >= total.value)
			return
		page.value++; // 页码加1
		handlePageUpdate()
	}, 500)
	import {
		getPostListByUserId,
		getClubs,
	} from '@/apis/apis.js'
	const tipPopup = ref(null)
	const warnContext = ref('由于您近日来多次不当言论，您的用户已经被封禁')
	const ifShowWarnContext = ref(false)
	const clubAuditLength = ref()
	const typeData = ref(0)
	provide('typeData', typeData)
	const page = ref(1);
	const total = ref(0)
	const type = ref('')
	const changeTypeCenter = async (e) => {
		const index = e.detail.index
		typeData.value = index
		page.value = 1;
		total.value = 0;
		let tempStatu = 'all'
		if (typeData.value === 1 && user.value.role === 'jyu_admin') {
			tempStatu = 3

		} else if (typeData.value !== 0 && useUser.isAnyClubTeacher) {
			tempStatu = 0

		}
		const res = await getPostListByUserId({
			statu: tempStatu,
			pageNum: 1,
			pageSize: 10,
		})
		console.log(res)
		centerData[typeData.value] = res.data
		total.value = res.total
		// console.log("centerData | ",centerData);
		// type.value = tempStatu
	}
	provide('changeTypeCenter', changeTypeCenter) //注入子组件
	onShow(() => {
		user.value = useUser.userInf
		console.log(typeData.value, 'typedata')
		getClubs({
			pageSize: 1,
			page: 1,
			clubName: '',
			statu: 0
		}).then((_res) => {
			clubAuditLength.value = _res.total
		})

		changeTypeCenter({
			detail: {
				index: typeData.value
			}
		})
	})
	const handlePageUpdate = async () => {
		let tempStatu = 'all'
		if (typeData.value === 1 && user.value.role === 'jyu_admin') {
			tempStatu = 3

		} else if (typeData.value !== 0 && useUser.isAnyClubTeacher) {
			tempStatu = 0

		}
		const res = await getPostListByUserId({
			statu: tempStatu,
			pageNum: page.value,
			pageSize: 10,
		})
		centerData[typeData.value] = centerData[typeData.value].concat(res.data)
	}
	const centerData = reactive([
		[],
		[],
		[]
	])
	// 确定社团活动标签页的索引
	const activityTabIndex = computed(() => {
		if (user.value.role === 'jyu_admin') return 2
		return 1
	})
	// console.log("centerData | ",centerData);
	const newPost = () => {
		if (useUser.userInf.role !== 'warn') {
			uni.navigateTo({
				url: '/pages/newPost/newPost'
			})
		} else {
			uni.showModal({
				content: '封禁用户无法发出帖子',
				showCancel: false
			});
		}

	}
	const newClub = () => {
		if (useUser.userInf.role !== 'warn') {
			uni.navigateTo({
				url: '/pages/applyClub/applyClub'
			})
		} else {
			uni.showModal({
				content: '封禁用户无法申请社团',
				showCancel: false
			});
		}
	}
	const toEdit = () => {
		uni.navigateTo({
			url: '/pages/editUser/editUser'
		})
	}
	const toClubAudit = () => {
		uni.navigateTo({
			url: '/pages/clubAudit/clubAudit'
		})
	}
	const toLogin = () => {
		if (!useUser.token)
			uni.navigateTo({
				url: '/pages/login/login'
			})
	}
</script>

<style lang="less" scoped>
	.centerTop {
		width: 100%;
		background-color: #f6f7f9;
		display: flex;
		flex-direction: column;
		align-items: center;

		.goClubAudit {
			padding: 10rpx;
			background-color: #f9f9f9;
			border: black 2rpx solid;
			border-radius: 20rpx;
			right: 20rpx;
			bottom: 20rpx;
			position: fixed;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;

			.redPoint {
				position: absolute;
				top: -15rpx;
				right: 0rpx;
				background-color: red;
				color: white;
				font-size: 35rpx;
				padding: 2rpx 15rpx 2rpx 15rpx;
				border-radius: 50%;
			}

			.clubIcon {
				height: 100rpx;
				width: 100rpx;
			}
		}

		.header {
			width: 100%;
			padding: 40rpx;
			position: relative;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background-color: white;
			box-sizing: border-box;
			gap: 40rpx;
			display: flex;
			align-items: center;

			.avatar {
				height: 160rpx;
				width: 160rpx;
				top: -70rpx;
				border-radius: 30rpx;
			}

			.userInf {
				width: 70%;

				.userName {
					font-size: 40rpx;
					top: 70rpx;
				}

				.warnDetail {
					font-size: 30rpx;
					color: #ff0000;
					opacity: 0.4;
					margin-right: 40rpx;
				}

				.msgDetail {
					display: flex;
					margin-top: 5rpx;
					gap: 4rpx;
				}
			}


			.editIcon {
				float: right;
				position: absolute;
				right: 40rpx;
			}
		}


		.newPost {
			height: 200rpx;
			width: 100%;
			margin-top: 10rpx;
			background-color: white;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4%;

			&.disabled {
				opacity: 0.3;
			}

			.btn {
				height: 100%;
				width: 48%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40rpx;
				font-weight: 800;
				color: white;

				&.left {
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					background: linear-gradient(311deg, #AFF5FF 11.23%, #4A6FFF 100%);
				}

				&.right {
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					background: linear-gradient(146deg, #C9FF99 0%, #00E3AE 100%);
				}

			}
		}
	}

	.centerBody {
		// height: auto;
		padding-bottom: 20rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		width: 100%;
		// margin-top: 10rpx;
		background-color: white;
		z-index: 10;
	}
</style>